<template>
  <div id="#app">
    
      <car-header v-show="cshow"></car-header>


      <router-view 
      :car-logo="carLogo"
      :car-price="carPrice"
      :car-hot="carHot"
      :car-news="carNews"
      @car-show="carShow"
      :key="activeQuery"
      login="login"
      @login-go="loginGo"
      ></router-view>


      <car-footer v-show="cshow"></car-footer>
    
  </div>
</template>

<script>
import { getJsonData } from './api/home';
import carHeader from "./components/CarHeader.vue"
import carFooter from "./components/CarFooter.vue"
  export default {
    data(){
      return{
        carLogo:null,
        carPrice:null,
        carHot:null,
        carNews:null,
        cshow:false,
        login:false
      }
    },
    created(){
      getJsonData().then(data => {
        // console.log(data.data[0].carHot);
        this.carLogo = data.data.carLogo;
        this.carPrice = data.data.carPrice;
        this.carHot = data.data.carHot;
        this.carNews = data.data.carNews;
      })
      
    },
    methods:{
      carShow(boo){
        this.cshow = boo
      },
      loginGo(){
        this.login= true;
      }
    },
    computed:{
    activeQuery(){
    return this.$route.query + new Date()
    }
  },
    components: {
      carHeader,
      carFooter
    }
  }
</script>

<style lang="scss" scoped>

</style>
